<template>
    <div id="OrderAdress">
        <h3 class="OA-title">{{navText}}</h3>
        <form class="p-wrap">
            <div class="p-left">
                <div class="pw-item">
                    <span>地址信息</span>
                    <el-cascader
                    size="large"
                    :options="options"
                    v-model="selectedOptions"
                    @change="handleChange">
                  </el-cascader>
                </div>
                <div class="pw-item">
                    <span>详细地址</span>
                    <textarea v-model="info.detail"></textarea>
                </div>
                <div class="pw-item">
                    <span>收件人：</span>
                    <input type="text" v-model="info.receiver">
                </div>
                <div class="pw-item">
                    <span>联系电话：</span>
                    <input type="text" v-model="info.mobile">
                </div>
                <div class="pw-item">
                    <span>设为默认地址：</span>
                    <div class="pw-box">
                        <input type="radio" value="0" v-model="info.isDefault" id="unDefault" name="sex">
                        <span></span>
                    </div>
                    <label for="unDefault">否</label>
                    <div class="pw-box">
                        <input type="radio" value="1" v-model="info.isDefault" id="Default" name="sex">
                        <span></span>
                    </div>
                    <label for="Default">是</label>
                </div>
                <div class="pw-item">
                    <span></span>
                    <span class="pw-sub" @click="submitAdress()">保存</span>
                    <span v-show="!isAdd" class="pw-can" @click="cancaleFun()">取消</span>
                </div>
            </div>
        </form>
        <div class="OA-table">
            <el-alert
                title="收获地址列表"
                type="warning"
                :closable="false">
            </el-alert>
             <el-table ref="multipleTable"
                element-loading-background="rgba(0, 0, 0, 0.4)"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                type=index>
                <el-table-column prop="receiver" label="收件人" width="120"></el-table-column>
                <el-table-column label="所在地区" >
                  <template slot-scope="scope">
                      <span class="OA-areas">{{scope.row.province}}</span>
                      <span class="OA-areas">{{scope.row.city}}</span>
                      <span class="OA-areas">{{scope.row.district}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="detail" label="详细地址" width="160" ></el-table-column>
                <el-table-column prop="mobile" label="联系电话" ></el-table-column>
                <el-table-column label="操作" width="200px">
                  <template slot-scope="scope">
                    <button class="control-btn change" @click="changeAddress(scope.row.addressId, scope.$index)">修改</button>
                    <button class="control-btn delete" @click="delAddress(scope.row.addressId, scope.$index)">删除</button>
                  </template>
                </el-table-column>
                <el-table-column  width="200px">
                  <template slot-scope="scope">
                    <button :class="scope.row.isDefault === 0?'Default':'unDefault'" @click="isDefaultFun(scope.row, scope.row.isDefault)">{{scope.row.isDefault === 0?'设为默认':'默认地址'}}</button>
                  </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script>
import { regionData, CodeToText, TextToCode } from 'element-china-area-data'
import provinceAndCity from '@/components/font/home/tool/province.json'
export default {
  name: 'profile',
  data () {
    return {
      info: {
        isDefault: 0,
        province: '',
        city: '',
        district: '',
        detail: '',
        mobile: '',
        receiver: ''
      },
      options: regionData,
      selectedOptions: [],
      provinceAndCity,
      search: {},
      tableData: [],
      isAdd: true,
      navText: '新增地址'
    }
  },
  methods: {
    handleChange (value) {
      // console.log(value)
      this.info.province = CodeToText[value[0]]
      this.info.city = CodeToText[value[1]]
      this.info.district = CodeToText[value[2]]
      // console.log(this.info.province + ',' + this.info.city + ',' + this.info.district)
      this.info.address = this.info.province + '-' + this.info.city + '-' + this.info.district + '-' + value[0] + '-' + value[1] + '-' + value[2]
    },
    getData () {
      this.$axios({
        method: 'post',
        url: '/Menu/Address/list',
        headers: {
          token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJyb2xlIjoiMCIsImV4cCI6MTY0NjU2MTgwOCwiaWF0IjoxNjQ1OTU3MDA4LCJ1c2VySWQiOiI2In0.yS1O7C5tYo-KsJT9UxKFT4x2_Z1F9BdGVWIWLWMHsUo'
        }
      }).then(data => {
        if (data.data.code === 200) {
          console.log(data.data)
          this.tableData = data.data.object
        }
      }).catch(error => {
        console.log(error)
      })
    },
    submitAdress () {
      if (this.judjeFun()) {
        if (this.isAdd) {
          this.$axios({
            method: 'post',
            url: '/Menu/Address/add',
            params: {
              province: this.info.province,
              city: this.info.city,
              district: this.info.district,
              detail: this.info.detail,
              receiver: this.info.receiver,
              mobile: this.info.mobile,
              isDefault: this.info.isDefault
            }
          }).then(data => {
            console.log(data.data.code)
            if (data.data.code === 200) {
              this.$message({
                message: '地址添加成功',
                type: 'success'
              })
              this.info = {}
              this.selectedOptions = []
              this.getData()
            } else {
              this.$message.error('请求失败请重试')
            }
          }).catch(error => {
            console.log(error)
          })
        } else {
          this.$axios({
            method: 'post',
            url: '/Menu/Address/update',
            params: {
              province: this.info.province,
              city: this.info.city,
              district: this.info.district,
              detail: this.info.detail,
              receiver: this.info.receiver,
              mobile: this.info.mobile,
              isDefault: this.info.isDefault,
              addressId: this.info.addressId
            }
          }).then(data => {
            console.log(data.data)
            if (data.data.code === 200) {
              this.$message({
                message: '地址修改成功',
                type: 'success'
              })
              this.getData()
              this.cancaleFun()
            } else {
              this.$message.error('请求失败请重试')
            }
          }).catch(error => {
            console.log(error)
          })
        }
      }
    },
    changeAddress (key, index) {
      console.log(key, index)
      this.info = this.tableData[index]
      this.isAdd = !this.isAdd
      this.navText = '修改地址'
    },
    delAddress (key, index) {
      console.log(key, index)
      this.$confirm('是否确认删除该地址?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios({
          method: 'post',
          url: '/Menu/Address/delete',
          params: {
            addressId: key
          }
        }).then(data => {
          if (data.data.code === 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getData()
          }
        }).catch(error => {
          console.log(error)
        })
      }).catch(() => {
      })
    },
    cancaleFun () {
      this.navText = '新增地址'
      this.isAdd = !this.isAdd
      this.info = {}
      this.selectedOptions = []
      this.info.isDefault = 0
    },
    isDefaultFun (key, flag) {
      if (flag === 0) {
        this.$axios({
          method: 'post',
          url: '/Menu/Address/setDefalut',
          headers: {
            token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJyb2xlIjoiMCIsImV4cCI6MTY0NjI5OTAyNywiaWF0IjoxNjQ1Njk0MjI3LCJ1c2VySWQiOiI2In0.HD68vUB7OaN-dGEi8Rig3WALnElebBfVNNIypDszLzI'
          },
          params: {
            addressId: key.addressId
          }
        }).then(data => {
          console.log(data.data)
          if (data.data.code === 200) {
            this.$message({
              message: '设置成功',
              type: 'success'
            })
            this.getData()
          } else {
            this.$message.error('请求失败请重试')
          }
        }).catch(error => {
          console.log(error)
        })
      }
    },
    checkPhone () {
      var mobile = this.info.mobile
      var tel = /^0\d{2,3}-?\d{7,8}$/
      var phone = /^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/
      if (mobile.length === 11) { // 手机号码
        console.log(phone.test(mobile))
        if (phone.test(mobile)) {
          return true
        }
      } else if (mobile.length === 12 && mobile.indexOf('-') !== -1) { // 电话号码
        if (tel.test(mobile)) {
          console.log(mobile)
          return true
        }
      }
      return false
    },
    judjeFun () {
      if (this.info.province.trim() === '' || this.info.city.trim() === '' || this.info.district.trim() === '') {
        this.$message.error('请选择地址')
        return false
      }
      if (this.info.detail.trim() === '') {
        this.$message.error('请填写详细地址')
        return false
      }
      if (this.info.receiver.trim() === '') {
        this.$message.error('请填写收件人')
        return false
      }
      if (!this.checkPhone()) {
        this.$message.error('请填写正确的号码')
        return false
      }
      return true
    }
  },
  mounted () {
    this.getData()
    console.log(CodeToText['110000'])
    console.log(TextToCode['北京市'].code)
  },
  updated () {
    // this.getData()
  }
}
</script>

<style lang="less" scoped>
#OrderAdress{
    margin: 60px auto;
    width: 1000px;
    .OA-title{
        display:inline-block;
        width: auto;
        border-bottom: 2px solid #383830;
        font-weight: bold;
        font-size: 14px;
        color: #383830;
        margin-bottom:25px;margin-top:20px;
        padding-bottom: 10px;
    }
    .p-wrap{
        width: 100%;
        overflow: hidden;
        height: auto;
        .p-left{
            float: left;
            width: 750px;
            .pw-item{
                height: auto;
                line-height: 38px;
                margin-top: 20px;
                span{
                    width: 140px;
                    height: 20px;
                    display: inline-block;
                    text-align: right;
                    vertical-align: top;
                    margin-right: 12px;
                    font-size: 15px;
                }
                input[type=text]{
                    display: inline-block;
                    width: 433px;
                    height: 38px;
                    padding-left: 13px;
                    border: 1px solid #E5E3DF;
                    border-radius: 4px;
                    font-size: 15px;
                }
                input[type="radio"]{
                    margin:0 6px 0 12px;
                }
                textarea{
                    display: inline-block;
                    width: 581px;
                    height: 80px;
                    padding: 0 0 0 13px;
                    border: 1px solid #E5E3DF;
                    border-radius: 4px;
                    font-size: 15px;
                    line-height: 27px;
                    resize: none;
                }
                .pw-sub{
                    display: inline-block;
                    width: 168px;
                    height: 42px;
                    margin-left: 94px;
                    margin-bottom: 80px;
                    border-radius: 4px;
                    background: #FFB31A;
                    font-size: 15px;
                    line-height: 42px;
                    color: #fff;
                    text-align: center;
                    &:hover{
                        cursor: pointer;
                    }
                }
                .pw-can{
                    display: inline-block;
                    width: 168px;
                    height: 42px;
                    margin-left: 10px;
                    margin-bottom: 80px;
                    border-radius: 4px;
                    background: #C4C4C4;
                    font-size: 15px;
                    line-height: 42px;
                    color: #fff;
                    text-align: center;
                    &:hover{
                        cursor: pointer;
                    }
                }
                .pw-box{
                    display: inline-block;
                    width: 15px; height: 15px;
                    // margin: 0 5px 0 0;
                    position: relative;
                    background-color: #fff;
                    vertical-align:middle;
                    border-radius: 100%;
                    border: 1px solid #E5E3DF;
                    input{
                        opacity: 0;
                        margin: 0;
                        position: absolute;top: 0;left: 0;
                        width: 100%;height: 100%;
                        z-index: 100;
                        background-color: red;
                    }
                    span{
                        display:block;width: 8px;height:8px;
                        border-radius:100%;
                        background-color: #FFB31A;
                        position: absolute;
                        top: 50%;left: 50%;
                        margin: -4px 0 0 -4px;
                        z-index: 1;
                    }
                    input+span{
                        opacity: 0;
                    }
                    input:checked+span{
                        opacity: 1;
                    }
                }
                label{
                    padding:3px 10px 0 5px ;
                    display: inline-block;
                }
                .data-select{display: inline-block;}
            }
        }
        .OA-table{
            width: 80%;
            margin: 0 auto;
        }
    }
}
</style>
